@import './reset';
@import './setting';
@import './flex';

@function getvw($w) {
    @return calc($w / 375) * 100+vw;
}

.container {
    width: getvw(375);
    @extend %columnCenter;
    margin-bottom: getvw(51);

    header {
        border-bottom: getvw(2) solid #F1F3F6;
        width: 100%;

        nav {
            height: getvw(45);
            display: flex;
            align-items: center;

            a {
                margin: 0 getvw(9) 0 getvw(10);

                i {
                    font-size: getvw(19);
                }
            }

            .searchBox {
                width: getvw(268);
                height: getvw(35);
                background-color: #f3f5f7ff;
                border-radius: getvw(36);
                overflow: hidden;
                position: relative;

                i {
                    font-size: getvw(16);
                    position: absolute;
                    top: 50%;
                    left: getvw(20);
                    transform: translateY(-50%);
                    color: #757575;
                }

                input {
                    width: 100%;
                    height: 100%;
                    padding-left: getvw(42);
                    background-color: transparent;
                    border: none;
                    outline: none;
                }
            }

            .serachBtn{
                width: getvw(55);
                height: getvw(27);
                margin-left: getvw(5.5);
                button {
                    width: 100%;
                    height: 100%;
                    background-color: #FF734C;
                    color: #ffffff;
                    border-radius: getvw(27);
                    border: none;
                }
            }
            
        }
    }

    main {
        width: getvw(345);
        padding-top: getvw(17);
        font-weight: 400;
        .title {
            color: #555555ff;
            font-size: getvw(14);
            margin-bottom: getvw(2);
        }

        .tag {
            width: 100%;
            display: flex;

            li {
                background-color: #E9ECF0;
                border-radius: getvw(5);
                margin-right: getvw(15);
                a {
                    display: block;
                    padding: getvw(7);
                    font-size: getvw(13);
                    color: #555555;
                }
            }
        }
    }
}